<template>
	<view class="activityListContainer">
		<zb-tab :activeStyle="{
		    fontWeight: 'bold',
		    transform: 'scale(1.1)'
		    }" :data="navTimeList" @click-tab="timeSelectd" v-model="active"></zb-tab>

		<view class="card" v-for="item,index in navTimeList" v-if="item.value==active" :key="item.value">
			<!-- 活动列表 -->
			<view v-if="item.value===0">
				<view class="content">

					<view class="flex-around activityHead">
						<view class="alignCenter" v-if="headShow ">
							<view class="">
								曝光总量
							</view>
							<view class="number">
								{{headShow.exposureQuantity?headShow.exposureQuantity:0}}
							</view>
						</view>
						<view class="alignCenter" v-if="headShow ">
							<view class="">
								点赞总数
							</view>
							<view class="number">
								{{headShow.upvoteQuantity?headShow.upvoteQuantity:0}}
							</view>
						</view>
						<view class="alignCenter" v-if="headShow ">
							<view class="">
								评论总数
							</view>
							<view class="number">
								{{headShow.commentQuantity?headShow.commentQuantity:0}}
							</view>
						</view>
					</view>
					<view class="search-all">
						<view class="search-content flex flex1">
							<image class="search-img" src="/static/sousuo.png"></image>
							<input placeholder="请输入用户名" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
								placeholder-style="color:#8F8F8F;" />
							<view @click="changeSearch" class="search-btn flex">搜索</view>
						</view>
					</view>
					<view class="paddiing12">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="flex-align-center-justify-end  color6" v-if="yeartime">
								{{ yeartime }}
								<text>-</text>
								{{ monthtime }}
								<text>-</text>
								{{ daytime }}<strong></strong>
								<image class="arrowImg" src="../../static/doPay/right-arrow.png" mode=""></image>
							</view>

						</picker>
						<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit"
							@down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
							<view class="activityList" v-for="(item,index) in list" :key="index">
								<view class="userAvater flex-between">
									<view class="flex-start-center">
										<image class="avater" :src="item.userAvatar" mode=""></image>
										<text
											style="color: black;font-weight: 700;font-size: 32rpx;">{{item.userName}}</text>
									</view>
									<view class="flex-start-center">

										<text
											style="color: red;font-weight: 700;font-size: 32rpx;">￥{{item.returnCashAmount?item.returnCashAmount:0 }}</text>
									</view>
								</view>
								<view class="userAvater flex-between border14" style="margin-top: 30rpx;">
									<view class="flex-start-center ">

										<text
											style="color: #999;font-weight: 700;font-size: 26rpx;">支付时间:{{formattedDate(item.payTime)}}</text>
											<!-- <text
												style="color: #999;font-weight: 700;font-size: 26rpx;">支付时间:{{item.payTime}}</text> -->
									</view>
									<view class="flex-start-center">

										<text
											style="color: #333;font-weight: 400;font-size: 26rpx;">付款￥{{item.payAmount }}</text>
									</view>
								</view>
								<view class=" flex-between " style="margin-top: 30rpx;">
									<view>

										<text
											style="color: #999;font-weight: 500;font-size: 26rpx;">曝光量：{{item.exposureAmount?item.exposureAmount:0}}</text>
									</view>
									<view class="border">

									</view>
									<view>

										<text class="margin10"
											style="color: #999;font-weight: 500;font-size: 26rpx;">点赞数：{{item.upvoteAmount?item.upvoteAmount:0}}</text>
									</view>
									<view class="border">

									</view>
									<view>

										<text
											style="color: #999;font-weight: 500;font-size: 26rpx;">评论数：{{item.commentAmount?item.commentAmount:0}}</text>
									</view>
								</view>
							</view>
						</mescroll-body>
						<drag-button v-if='hiddenCode' :isDock="true" :existTabBar="true" @btnClick="myPrize()" />
					</view>



				</view>



			</view>
			<!-- 活动配置 -->
			<paymentConfiguration v-if="item.value===2"></paymentConfiguration>
			<!-- 支付配置 -->
			<activeConfiguration v-if="item.value===1"></activeConfiguration>
			<!-- 支付信息 -->
			<paymentInformation v-if="item.value===3"></paymentInformation>
		</view>
       
       <sunui-popup ref="pop">
       	<template v-slot:content>
       		<view class="flex-column ">
       			<image class="qrcode" :src="followThePublicAccount"></image>
       
       			<!-- <button size="mini" @click="paste(followThePublicAccount)" type="primary"
       				plain="true">复制链接</button> -->
					<view class="">    
						长按图片进行保存
					</view>
       
       		</view>
       	</template>
       </sunui-popup>
	</view>
</template>

<script>
	import moment from 'moment'
	
	import activeConfiguration from './components/activeConfiguration/activeConfiguration.vue'
	import paymentConfiguration from './components/paymentConfiguration/paymentConfiguration.vue'
	import paymentInformation from './components/paymentInformation/paymentInformation.vue'
	export default {
		components: {
			activeConfiguration,
			paymentConfiguration,
			paymentInformation
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				active: 0,
				navTimeList: [{
						name: '活动列表',
						value: 0,

					},
					{
						name: '活动配置',
						value: 1,
					},
					{
						name: '支付配置',
						value: 2,
					},
					{
						name: '支付信息',
						value: 3,
					},
				],
				title: 'activityList',
				searchVal: '',
				//选择的年份
				date: null,
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],

				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				windowHeight: '',
				merchantId: uni.getStorageSync('merchantId'),
				headShow: null,
				list: [],
				followThePublicAccount: '',
				form: {
					userName: '',
					startPayTime: `${currentDate.split('-')[0]}-${currentDate.split('-')[1]}-${currentDate.split('-')[2]}`

				},
				hiddenCode: false,

				where: null,
				activityConfigId: ''
			}
		},
       

		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 600;
				}
			});
			this.query()
			this.headStatisticsFn()
             

		},

		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},


		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
            // 时间格式化
            formattedDate () {
              return (params) => {
                const currentDate = moment(params);
                const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
                return formattedDate;
              };
            },

		},
		methods: {
			// 复制订单号
			timeSelectd(e) {
				
				if (e.value == 0) {
					console.log(e)
					this.$nextTick(() => {
						this.mescroll.resetUpScroll();
					});
				}
			},
			paste(orderNumber) {
				console.log(orderNumber)
				uni.setClipboardData({
					data: orderNumber
				});
				this.$sun.toast('复制成功')
			},
			async myPrize() {

				const res = await this.$http.get({
					url: this.$api.generateDoupayQrCode,
					data: {


						merchantId: this.merchantId,
						activityConfigId: this.activityConfigId

					},

				})
				if (res.code == 2000 && res.msg) {
					this.followThePublicAccount = res.msg
				}
				// 掉接口
				this.$refs.pop.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});


			},

			async query() {
				const reuslt = await this.$http.post({
					url: this.$api.getActivityconfigList,
					data: {

						limit: 10,
						merchantId: this.merchantId,
						page: 1,

					}
				})

				if (reuslt.code == 2000 && reuslt.data.list.length) {
					const listObect = reuslt.data.list[0];


					this.activityConfigId = listObect.id;

					this.hiddenCode = true;
				} else {

					this.hiddenCode = false;
				}

			},

			changeInput(e) {
				console.log(e.detail.value)
				this.form.userName = e.detail.value
				this.mescroll.resetUpScroll();

			},
			//输入键盘的搜索
			changeSearch() {
				this.mescroll.resetUpScroll();
			},
			async headStatisticsFn() {

				const result = await this.$http.post({
					url: this.$api.headStatistics,
					data: {
						merchantId: this.merchantId
					}
				});

				if (result.code == 2000) {
					console.log(JSON.stringify(result) + '======头部')
					this.headShow = result.data
				}


			},
			async upCallback(scroll) {

				if (this.form.userName) {
					this.where = {
						page: scroll.num,
						limit: 10,
						userName: this.form.userName,
						merchantId: this.merchantId,
						payTime: this.form.startPayTime


					}
				} else {
					this.where = {
						page: scroll.num,
						limit: 10,
						merchantId: this.merchantId,
						payTime: this.form.startPayTime

					}
				}


				const result = await this.$http.post({
					url: this.$api.getActivitylist,
					data: {
						...this.where
					}
				});
				if (result.code == 2000) {

					console.log('result.data', result.data);
					// this.mescroll.endByPage(result.data.list.length, 1);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					// this.mescroll.endByPage(result.data.list.length, 12);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

				}
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];

				this.form.startPayTime = `${this.yeartime}-${this.monthtime}-${this.daytime}`
				this.mescroll.resetUpScroll();


			},

			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},
		}
	}
</script>

<style lang="less">
	.activityListContainer{
		margin-top: 10rpx;
	}
	.activityHead {
		width: 100%;
		padding-top: 38rpx;
		height: 108rpx;
		background-color: #fff;

		.alignCenter {
			text-align: center;

			.number {
				margin-top: 18rpx;
				color: #1E6CEB;
				font-family: Inter;
				font-size: 40rpx;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
			}
		}


	}

	/deep/.sunui-pop-panel {
		z-index: 998;
	}

	.search-all {
		padding: 30rpx 20rpx;
		background: #fff;
		margin: 2rpx 0 0rpx;

		.search-content {
			border-radius: 100rpx;
			background: #f9f9f9;
			height: 80rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx 0 30rpx;
			}

			input {
				flex: 1;
			}

			.search-btn {
				margin-left: 20rpx;
				color: #fff;
				font-size: 32rpx;
				width: 148rpx;
				height: 80rpx;
				border-radius: 48rpx;
				background: #1E6CEB;
			}
		}
	}

	.qrcode {
		margin-bottom: 10rpx;
	}

	.paddiing12 {
		padding: 10rpx 30rpx;

		.arrowImg {
			width: 32rpx;
			height: 32rpx;

		}

		.activityList {
			box-sizing: border-box;
			padding: 24rpx;
			margin-top: 26rpx;
			background-color: #fff;
			width: 700rpx;
			height: 300rpx;
			border-radius: 20rpx;

			.userAvater {
				.avater {
					width: 62rpx;
					height: 62rpx;
					margin-right: 20rpx;
					border-radius: 52rpx;

				}



			}

			.border {

				height: 30rpx;
				width: 2rpx;
				background-color: #F3F3F3;


			}

			.border14 {
				padding-bottom: 34rpx;
				border-bottom: 4rpx solid #F3F3F3;

			}




		}
	}
</style>